<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 85167
  Date: 2017/12/10
  Time: 11:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <c:import url="/WEB-INF/page/header.jsp"/>
    <link rel="stylesheet" type="text/css" href="/static/assets/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/common.css">
</head>
<body>
<div class="col-md-12">
    <form id="inputForm" action="${pageContext.request.contextPath}/admin/role/save_auth" method="post">
        <input id="id" type="hidden" name="id" value="${id}">
        <input id="menuIds" type="hidden" name="menus" value="">
        <table id="table1" class="layui-table" lay-filter="table1"></table>
    </form>
</div>
<script type="text/html" id="auth-state">
    <input type="checkbox" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="check">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<c:import url="/WEB-INF/page/footer.jsp"/>
<script src="/static/assets/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/module/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;

        // 渲染表格
        layer.load(2);
        treetable.render({
            treeColIndex: 1,
            treeSpid: 0,
            treeIdName: 'id',
            treePidName: 'pid',
            elem: '#table1',
            url: base + "/admin/role/authData?id="+$("#id").val(),
            page: false,
            cols: [[
                {type: 'numbers'},
                {field: 'name', minWidth: 200, title: '菜单名称'},
                {field: 'id',value: 'id', name: 'menuId', type: 'checkbox'}
            ]],
            done: function (res) {
                table_data = res.data;
                layer.closeAll('loading');
            }
        });
        table.on('checkbox(table1)', function (obj) {
            console.log(obj);
            if (obj.checked == true) {
                if (obj.type == 'one') {
                    ids.push(obj.data.id);
                } else {
                    for (var i = 0; i < table_data.length; i++) {
                        ids.push(table_data[i].id);
                    }
                }
            } else {
                if (obj.type == 'one') {
                    for (var i = 0; i < ids.length; i++) {
                        if (ids[i] == obj.data.id) {
                            ids.pop();   //建议用这个
                            ids.splice(i, 1);
                        }
                    }
                } else {
                    for (var i = 0; i < ids.length; i++) {
                        for (var j = 0; j < table_data.length; j++) {
                            if (ids[i] == table_data[j].id) {
                                ids.pop();
                                ids.splice(i, 1);
                            }
                        }
                    }
                }
            }
            $("#menuIds").val(ids);
        });

        //自定义数组
        var table_data = new Array();
        var ids = new Array();
    });


</script>
</body>
</html>
